<template>
  <a-empty v-if="props.program?.length <= 0"/>
  <div v-else style="background-color: #ececec; padding: 20px">
    <a-row :gutter="16">
      <a-col :span="6" v-for="(program) in props.program" :key="program.id" style="margin-top: 10px;">
        <a-card :title="program.name" :bordered="false" hoverable="hoverable"
                @click="router.push(`/program/desc/${program.id}`)"
                style="height: 250px;"
        >
          <template #extra>
            <a-alert :message="program.role + ' ⋮'" type="success" show-icon>
              <template #icon>
                <smile-outlined/>
              </template>
            </a-alert>
          </template>
          <div style="overflow: hidden; text-overflow: ellipsis; height: 126px;">
            {{ program.description == '' ? '这个人很懒，什么都没有写' : program.description }}
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">

import {SmileOutlined} from '@ant-design/icons-vue';
import router from "@/router";

const props = defineProps({
  'program': Array
})

</script>

<style scoped lang="less">

</style>